<template>
  <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col flex-shrink-0" :class="{ 'sidebar-collapsed': !sidebarOpen }">
    <!-- 应用标题 -->
    <div class="p-6 border-b border-slate-200">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
            <i class="fas fa-brain text-white text-lg"></i>
          </div>
          <div class="fade-text" :class="{ 'hidden': !sidebarOpen }">
            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">博沃智慧</h1>
            <p class="text-xs text-slate-500">智能助手</p>
          </div>
        </div>
        <button @click="$emit('toggle-sidebar')" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
          <i class="fas fa-bars text-slate-600"></i>
        </button>
      </div>
    </div>

    <!-- Robot选择器 -->
    <div class="p-4 border-b border-slate-200">
      <div class="mb-3">
        <!-- <label class="block text-sm font-medium text-slate-700 mb-2 fade-text" :class="{ 'hidden': !sidebarOpen }">选择Robot</label> -->
        <select v-model="selectedRobot" class="w-full p-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
          <option value="robot1">机器人1</option>
          <option value="robot2">机器人2</option>
          <option value="tech-docs">技术文档库问答</option>
          <option value="work-docs">工作资料库问答</option>
          <option value="study-docs">学习资料库问答</option>
        </select>
      </div>
    </div>

    <!-- 对话记录 -->
    <div class="flex-1 overflow-y-auto custom-scrollbar has-tooltip">
      <div class="p-4">
        <div class="flex items-center justify-between mb-4">
          <h3 class="fade-text font-semibold text-slate-700" :class="{ 'hidden': !sidebarOpen }">对话历史</h3>
          <button @click="$emit('new-conversation')" class="fade-text p-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600 transition-colors" :class="{ 'hidden': !sidebarOpen }">
            <i class="fas fa-plus text-sm"></i>
          </button>
        </div>

        <!-- 搜索框 -->
        <div class="search-box mb-4 fade-text" :class="{ 'hidden': !sidebarOpen }">
          <div class="relative">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
            <input 
              v-model="searchQuery"
              type="text" 
              placeholder="搜索对话..." 
              class="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500"
            >
          </div>
        </div>

        <!-- 对话列表 -->
        <div class="space-y-2 fade-text" :class="{ 'hidden': !sidebarOpen }">
          <div 
            v-for="conversation in filteredConversations" 
            :key="conversation.id"
            @click="handleConversationClick(conversation)"
            class="conversation-item p-3 rounded-lg hover:bg-slate-50 cursor-pointer transition-colors"
            :class="{ 'bg-indigo-50 border-l-4 border-indigo-500': selectedConversation?.id === conversation.id }"
          >
            <div class="flex items-center space-x-3">
              <div class="flex-shrink-0">
                <i :class="getConversationIcon(conversation.type)"></i>
              </div>
              <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-slate-800 truncate">{{ conversation.title }}</p>
                <p class="text-xs text-slate-500">{{ formatDate(conversation.created_at) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户信息区域 -->
    <div class="user-info p-4 border-t border-slate-200">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <div class="user-avatar w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-md">
            <i class="fas fa-user text-white"></i>
          </div>
          <div class="fade-text" :class="{ 'hidden': !sidebarOpen }">
            <p class="text-sm font-medium text-slate-800">{{ authStore.user?.username || '用户' }}</p>
            <p class="text-xs text-slate-500">{{ authStore.user?.email || 'user@example.com' }}</p>
          </div>
        </div>
        <div class="user-actions flex space-x-2">
          <button class="p-2 rounded-lg hover:bg-slate-100 transition-colors" title="设置">
            <i class="fas fa-cog text-slate-600"></i>
          </button>
          <button @click="$emit('logout')" class="p-2 rounded-lg hover:bg-red-100 transition-colors" title="退出登录">
            <i class="fas fa-sign-out-alt text-slate-600"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '../../stores/auth'
import { getConversationIcon, formatDate } from '../../utils/home'
import type { Conversation } from '../../types/home'

interface Props {
  sidebarOpen: boolean
  selectedRobot: string
  searchQuery: string
  selectedConversation: Conversation | null
  conversations: Conversation[]
  filteredConversations: Conversation[]
}

interface Emits {
  (e: 'toggle-sidebar'): void
  (e: 'new-conversation'): void
  (e: 'select-conversation', conversation: Conversation): void
  (e: 'update:selectedRobot', value: string): void
  (e: 'update:searchQuery', value: string): void
  (e: 'logout'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const authStore = useAuthStore()

const selectedRobot = computed({
  get: () => props.selectedRobot,
  set: (value) => emit('update:selectedRobot', value)
})

const searchQuery = computed({
  get: () => props.searchQuery,
  set: (value) => emit('update:searchQuery', value)
})

const handleConversationClick = (conversation: Conversation) => {
  console.log('Sidebar: 点击对话', conversation.title)
  emit('select-conversation', conversation)
}
</script>

<style scoped>
/* 侧边栏动画 */
.sidebar {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 15%;
  min-width: 0;
  overflow: hidden;
}

.sidebar-collapsed {
  width: 64px !important;
}

/* 折叠状态下的文本样式 */
.sidebar-collapsed .fade-text {
  opacity: 0;
  pointer-events: none;
}

/* 折叠按钮图标过渡 */
#sidebarToggle i {
  transition: transform 0.3s ease;
}

.sidebar-collapsed #sidebarToggle i {
  transform: rotate(180deg);
}

/* 折叠状态下的用户区域样式 */
.sidebar-collapsed .user-avatar {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  display: block;
}

.sidebar-collapsed .user-actions {
  opacity: 1;
  pointer-events: auto;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-collapsed .user-actions button {
  width: 36px;
  height: 36px;
  padding: 8px;
}

/* 折叠状态下的用户信息区域 */
.sidebar-collapsed .user-info {
  text-align: center;
  padding: 10px;
}

/* 悬停提示 */
.has-tooltip {
  position: relative;
}

.tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  background: #1f2937;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 50;
}

.has-tooltip:hover .tooltip {
  opacity: 1;
}

/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  display: block;
}
</style>